import React from 'react'
import './less/blogitem.less'
import { withRouter } from 'react-router-dom'

import { format } from '#utils/format'

const BlogItem = props => {
  console.log(props.date)
  const goToDetail = (id) => {
    props.history.push(`/detail/${id}`)
  }
  return (
    <section className="blog-item" onClick={() => goToDetail(props.id)}>
      <div className="blog-item-content">
        <div className="blog-item-image">
          <img src={props.image || require('#assets/moren.jpg')} alt="" />
        </div>
        <div className="blog-item-desc">
          <h3>{props.title}</h3>
          <p>{props.description}</p>
        </div>
        <div className="blog-item-info">
          <div className="blog-item-date">
            <i className="iconfont icon-date"></i>
            {props.date ? format(props.date) : ''}
          </div>
        </div>
      </div>
    </section>
  )
}

export default withRouter(BlogItem)
